import { Menu, Trigger, TriggerProps } from '@arco-design/web-react'
import classNames from 'classnames'
import React from 'react'

export interface IContextMenuProps extends TriggerProps {
    items: {
        label: React.ReactNode
        onClick: (e: React.MouseEvent) => void
        className?: string
    }[]
}

const ContextMenu: React.FC<IContextMenuProps> = ({ items, ...props }) => {
    return (
        <Trigger
            popup={() => (
                <Menu className='rounded w-[120px] shadow'>
                    {items.map((item, index) => (
                        <Menu.Item
                            key={index.toString()}
                            onClick={item.onClick}
                            className={classNames(
                                '!py-0 !line-height-[26px] !mb-0',
                                item.className,
                            )}
                        >
                            {item.label}
                        </Menu.Item>
                    ))}
                    {/* <Menu.Item
                        className='!py-0 !line-height-[26px] !mb-0 !text-red-500'
                        key='1'
                        onClick={() => handleDelete(item)}
                    >
                        <IconDelete className='!text-red-500' />
                        删除
                    </Menu.Item> */}
                </Menu>
            )}
            alignPoint
            position='bl'
            popupAlign={{
                bottom: 8,
                left: 8,
            }}
            trigger='contextMenu'
        >
            {props.children}
        </Trigger>
    )
}

export default ContextMenu
